@import '@/app/styles/variables';

.newPass {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.title {
  color: var(--Simple-Night, #000);
  text-align: center;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px;
}

.button {
  display: flex;
  justify-content: center;
}

.block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  width: 522px !important;
}

.blockTitle {
  color: var(--Simple-Night, #000);
  font-size: 20px;
  font-style: normal;
  align-self: flex-start;
  font-weight: 500;
  line-height: 26px;
}

.passes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
}

@include media(sm) {
  .modal {
    bottom: 0;
    width: 100%;
    transform: unset;

    .header {
      height: 24px;
    }
  }

  .block {
    width: 100% !important;
  }

  .title {
    align-self: flex-start;
    font-size: 24px;
  }

  .passes {
    gap: 24px;
  }

  .blockTitle {
    font-size: 16px;
  }

  .forgot {
    font-size: 14px;
  }

  .button {
    width: 100%;
  }

  .block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
}
